<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据劫持MVVM</title>
</head>

<!-- Vue  
    视图层  展示数据的信息 (View)
    数据层  从服务器请求下来的数据 (Model)
    ViewModel层 是 View和Model沟通的桥梁

    一方面实现了Data Binding (Data 数据绑定) 将Model的改变实时的反应到View中；
    (【模型】转化成【视图】，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。)


    另一方面实现了DOM Listener(DOM 事件监听) 当DOM发生一些事件（点击、滚动、touch等）时，
    可以监听到，并在需要的情况下改变对应的Data。 
    ( 视图 转化成 模型，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。这两个方向都实现的，我们称之为数据的双向绑定。)

    MVVM 就是通过( 数据劫持 + 代理) + 发布订阅模式 + 双向数据绑定 实现 响应式数据 
    通过 发布订阅模式来实现

-->

<body>
    <div id="app">
        <div>
            <input type="text" v-model="name" placeholder="姓名">
            <input type="text" v-model="age" placeholder="年龄">
            <input type="text" v-model="email" placeholder="邮箱">
            <input type="text" v-model="tel" placeholder="电话号">
        </div>
        <div>
            <p>姓名:<span>{{ name }}</span></p>
            <p>年龄:<span>{{ age }}</span></p>
            <p>邮箱:<span>{{ email}}</span></p>
            <div>电话:
                <p><span>{{ tel }}</span></p>
            </div>
        </div>
        <button id="btn">修改名字</button>
    </div>

</body>
<script src="./MVVM.js"></script>
<script>
    const app = new MVVM('#app', {
        name: '',
        age: '',
        email: '',
        tel: ''
    })
    document.querySelector("#btn").addEventListener('click', function () {
        app.setData('name', '森森')
    })
    console.log(app);
</script>

</html>